<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeatStars</title>
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <!-- 头部 -->
    <header class="w">
        <div class="top">
            <div class="left">
                <a href="#"><img src="images/logo-red.svg" alt=""></a>
                <div class="search">
                    <form action="">
                        <button class="button-search">
                            <img src="images/search.png" alt="">
                        </button>
                        <input type="text" placeholder="What are you looking for?" name="" id="" value="">
                        <div class="button-all">
                            <div class="yuanjiao"></div>
                            <button>
                                <span>Track</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="right">
                <div class="right-sign">
                    <a href="#" class="sign-up"><span>Sign up</span></a>
                    <a href="html/denglu.html" class="sign-in"><span>Sign in</span></a>
                    <a href="#" class="start-selling"><span>Start Selling</span></a>
                </div>
                <a href="#" class="gouwuche"><img src="images/gouwuche.png" alt=""></a>
            </div>
        </div>
        <nav class="bottom">
            <ul>
                <li class="del-left-margin"><a href="index.html">Home</a></li>
                <li><a href="html/feed.html">Feed</a></li>
                <li class="tracks">
                    <a href="html/tracks.html">Tracks</a>
                    <div class="dropdown-content">
                        <div class="row">
                            <h2>BROWSE</h2>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Top Charts</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Free Beats</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Exclusive Only</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Public Playlists</span>
                            </a>
                        </div>

                        <div class="row">
                            <h2>TRENDING SEARCHES</h2>
                            <a href="#">
                                <span>Top Charts</span>
                            </a>
                            <a href="#">
                                <span>Free Beats</span>
                            </a>
                            <a href="#">
                                <span>Exclusive Only</span>
                            </a>
                            <a href="#">
                                <span>Public Playlists</span>
                            </a>
                            <a href="#">
                                <span>Top Charts</span>
                            </a>
                            <a href="#">
                                <span>Free Beats</span>
                            </a>
                            <a href="#">
                                <span>Exclusive Only</span>
                            </a>
                            <a href="#">
                                <span>Public Playlists</span>
                            </a>
                        </div>

                        <div class="row">
                            <h2>GENRES</h2>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>All Genre</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Hip Hop</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Pop</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>R&B</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Rock</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Electronic</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Reggae</span>
                            </a>
                            <a href="#">
                                <img src="images/aixing.png" alt=""><span>Country</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li><a href="html/gift-cards.html">Gift Cards </a><span class="new">New</span></li>
            </ul>
        </nav>
    </header>
    <!-- 主体部分1 -->
    <section class="banner">
        <!-- 背景视频 -->
        <div class="bg-video">
            <video playsinline autoplay loop muted width="100%">
                <source src="video/beatstars-home.mp4" type="video/mp4" />
            </video>
        </div>

        <!-- 绝对定位显示在视频之上的区域 -->
        <div class="banner-top">
            <div class="vidio-zhezhao">

            </div>
            <div class="banner-top-center">
                <h1>THE WORLD'S #1 MARKETPLACE <br> TO & SELL BEATS</h1>
                <!-- 白色搜索模块 -->
                <form action="">
                    <button class="button-search">
                        <img src="images/search.png" alt="">
                    </button>
                    <div class="input">
                        <input type="text" placeholder="Try “Hip hop beat” or “Drake type beat” " name="" id=""
                            value="">
                    </div>
                    <div class="shutiao"></div>
                    <div class="button-all">
                        <button>
                            <span>TRACKS</span>

                        </button>
                    </div>
                </form>
                <!-- 推荐模块 -->
                <div class="tuijian">

                    <h2>Trending:</h2>
                    <div class="beats-class">
                        <a href="#">drill</a>
                        <a href="#">lil durk</a>
                        <a href="#">boom bap</a>
                        <a href="#">hip hop</a>
                        <a href="#">drake</a>
                    </div>
                </div>
            </div>
            <!-- 第一层 -->
            <div class="middle">
                <div class="middle-top">
                    <h2 class="title"> Recommended Playlists </h2>
                    <div class="button">
                        <button class="left-arrow">
                            <span>
                                < </span>
                        </button>
                        <button class="right-arrow">
                            <span> > </span>
                        </button>
                    </div>
                </div>
                <div class="middle-botton">
                    <div class="box">
                        <div class="middle-botton-box">
                            <span class="border-little"></span>
                            <span class="border-big"></span>
                            <div class="zhezhao">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/1.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 简介 -->
                            <span> 46 Followers </span><span> 49 Tracks</span>
                            <a href="#" class="beatmaker">EST Gee Type Beats</a>
                            <div class="beatstars">
                                <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                <div class="beatstars-box">
                                    <!-- BeatStars简介 -->
                                    <div class="img">
                                        <img src="images/beatstars.png" alt="">
                                    </div>
                                    <div class="info-name">
                                        <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                    </div>
                                    <span class="location">Austin, Texas, United States of A...</span>
                                    <div class="fans">
                                        <div class="fans-left">
                                            <span class="num">687.8k</span>
                                            <span class="type">Followers</span>
                                        </div>
                                        <div class="fans-middle"></div>
                                        <div class="fans-right">
                                            <span class="num">1.1M</span>
                                            <span class="type">Plays</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <span class="border-little"></span>
                            <span class="border-big"></span>
                            <div class="zhezhao">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/2.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 简介 -->
                            <span> 69 Followers </span><span> 93 Tracks </span>
                            <a href="#" class="beatmaker"> Khalid Type Beats </a>
                            <div class="beatstars">
                                <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                <div class="beatstars-box">
                                    <!-- BeatStars简介 -->
                                    <div class="img">
                                        <img src="images/beatstars.png" alt="">
                                    </div>
                                    <div class="info-name">
                                        <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                    </div>
                                    <span class="location">Austin, Texas, United States of A...</span>
                                    <div class="fans">
                                        <div class="fans-left">
                                            <span class="num">687.8k</span>
                                            <span class="type">Followers</span>
                                        </div>
                                        <div class="fans-middle"></div>
                                        <div class="fans-right">
                                            <span class="num">1.1M</span>
                                            <span class="type">Plays</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <span class="border-little"></span>
                            <span class="border-big"></span>
                            <div class="zhezhao">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/3.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 简介 -->
                            <span> 26 Followers </span><span> 47 Tracks</span>
                            <a href="#" class="beatmaker"> French Montana Type Beats </a>
                            <div class="beatstars">
                                <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                <div class="beatstars-box">
                                    <!-- BeatStars简介 -->
                                    <div class="img">
                                        <img src="images/beatstars.png" alt="">
                                    </div>
                                    <div class="info-name">
                                        <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                    </div>
                                    <span class="location">Austin, Texas, United States of A...</span>
                                    <div class="fans">
                                        <div class="fans-left">
                                            <span class="num">687.8k</span>
                                            <span class="type">Followers</span>
                                        </div>
                                        <div class="fans-middle"></div>
                                        <div class="fans-right">
                                            <span class="num">1.1M</span>
                                            <span class="type">Plays</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <span class="border-little"></span>
                            <span class="border-big"></span>
                            <div class="zhezhao">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/4.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 简介 -->
                            <span> 15 Followers </span><span> 42 Tracks</span>
                            <a href="#" class="beatmaker"> Smiley Type Beats </a>
                            <div class="beatstars">
                                <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                <div class="beatstars-box">
                                    <!-- BeatStars简介 -->
                                    <div class="img">
                                        <img src="images/beatstars.png" alt="">
                                    </div>
                                    <div class="info-name">
                                        <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                    </div>
                                    <span class="location">Austin, Texas, United States of A...</span>
                                    <div class="fans">
                                        <div class="fans-left">
                                            <span class="num">687.8k</span>
                                            <span class="type">Followers</span>
                                        </div>
                                        <div class="fans-middle"></div>
                                        <div class="fans-right">
                                            <span class="num">1.1M</span>
                                            <span class="type">Plays</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box last-box">
                        <div class="middle-botton-box">
                            <span class="border-little"></span>
                            <span class="border-big"></span>
                            <div class="zhezhao">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/5.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 简介 -->
                            <span> 1.7 Followers </span><span> 40 Tracks</span>
                            <a href="#" class="beatmaker"> EST Gee Type Beats </a>
                            <div class="beatstars">
                                <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                <div class="beatstars-box">
                                    <!-- BeatStars简介 -->
                                    <div class="img">
                                        <img src="images/beatstars.png" alt="">
                                    </div>
                                    <div class="info-name">
                                        <a href="#">BeatStars <i><img src="images/renzheng.svg" alt=""></i></a>
                                    </div>
                                    <span class="location">Austin, Texas, United States of A...</span>
                                    <div class="fans">
                                        <div class="fans-left">
                                            <span class="num">687.8k</span>
                                            <span class="type">Followers</span>
                                        </div>
                                        <div class="fans-middle"></div>
                                        <div class="fans-right">
                                            <span class="num">1.1M</span>
                                            <span class="type">Plays</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 第二层 -->
            <div class="middle-2">
                <div class="middle-top middle-top2">
                    <h2 class="title"> Trending tracks </h2>
                    <div class="button">
                        <button class="left-arrow">
                            <span>
                                < </span>
                        </button>
                        <button class="right-arrow">
                            <span> > </span>
                        </button>
                    </div>
                </div>
                <div class="middle-botton">
                    <div class="box">
                        <div class="middle-botton-box">
                            <div class="zhezhao zhezhao2">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/6.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 修改第二部分简介结构 -->
                            <div class="beatname">
                                <a href=""><span>"Mood Swings" Sad Acoustic Guitar Type Beat No Drums</a>
                            </div>
                            <div class="zuozhe">
                                <a href="#">Pyros Dancehall <img src="images/renzheng.svg" alt=""></a>
                            </div>
                            <div class="bpm">
                                <span>100 BPM</span>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <div class="zhezhao zhezhao2">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/7.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 修改第二部分简介结构 -->
                            <div class="beatname">
                                <a href=""><span>Christmas Beat Sale</span><img src="images/ad.svg" alt=""></a>
                            </div>
                            <div class="zuozhe">
                                <a href="#">Pyros Dancehall</a>
                            </div>
                            <div class="bpm">
                                <span>100 BPM</span>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <div class="zhezhao zhezhao2">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/8.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 修改第二部分简介结构 -->
                            <div class="beatname">
                                <a href=""><span>Christmas Beat Sale</span></a>
                            </div>
                            <div class="zuozhe">
                                <a href="#">Pyros Dancehall</a>
                            </div>
                            <div class="bpm">
                                <span>100 BPM</span>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <div class="zhezhao zhezhao2">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/9.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 修改第二部分简介结构 -->
                            <div class="beatname">
                                <a href=""><span>Christmas Beat Sale</span></a>
                            </div>
                            <div class="zuozhe">
                                <a href="#">Pyros Dancehall</a>
                            </div>
                            <div class="bpm">
                                <span>100 BPM</span>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <div class="zhezhao zhezhao2">
                                <!-- 遮罩 -->
                                <button>
                                    <img src="images/bofang.png" alt="">
                                </button>
                            </div>
                            <a href="#" class="img">
                                <img src="images/10.png" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <!-- 修改第二部分简介结构 -->
                            <div class="beatname">
                                <a href=""><span>Christmas Beat Sale</span><img src="images/ad.svg" alt=""></a>
                            </div>
                            <div class="zuozhe">
                                <a href="#">Pyros Dancehall</a>
                            </div>
                            <div class="bpm">
                                <span>100 BPM</span>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

            <!-- 第三层圆形 -->
            <div class="middle-3">
                <div class="middle-top middle-top2">
                    <h2 class="title"> Recommended Members </h2>
                    <div class="button">
                        <button class="left-arrow">
                            <span>
                                < </span>
                        </button>
                        <button class="right-arrow">
                            <span> > </span>
                        </button>
                    </div>
                </div>
                <div class="middle-botton">
                    <div class="box-yuan">
                        <div class="yuan">
                            <img src="images/p1.png" alt="">
                        </div>
                        <a href="#" class="zhezhoa3">
                            <!-- 圆行遮罩 -->
                        </a>
                        <div class="jianjie3">
                            <!-- 第三部分简介 -->
                            <div class="nama"><a href="#">KidOcean</a></div>
                            <div class="address"><span>NEW YORK</span></div>
                        </div>
                    </div>

                    <div class="box-yuan">
                        <div class="yuan">
                            <img src="images/p2.png" alt="">
                        </div>
                        <a href="#" class="zhezhoa3">
                            <!-- 圆行遮罩 -->
                        </a>
                        <div class="jianjie3">
                            <!-- 第三部分简介 -->
                            <div class="nama"><a href="#">Beautiful Beats</a></div>
                        </div>
                    </div>

                    <div class="box-yuan">
                        <div class="yuan">
                            <img src="images/p3.png" alt="">
                        </div>
                        <a href="#" class="zhezhoa3">
                            <!-- 圆行遮罩 -->
                        </a>
                        <div class="jianjie3">
                            <!-- 第三部分简介 -->
                            <div class="nama"><a href="#">Donnie Katana </a> <img src="images/ad.svg" alt=""></div>
                            <div class="address"><span>Worldwide</span></div>
                        </div>
                    </div>

                    <div class="box-yuan">
                        <div class="yuan">
                            <img src="images/p4.png" alt="">
                        </div>
                        <a href="#" class="zhezhoa3">
                            <!-- 圆行遮罩 -->
                        </a>
                        <div class="jianjie3">
                            <!-- 第三部分简介 -->
                            <div class="nama"><a href="#">pyrexwhippa808mafia</a></div>
                            <div class="address"><span>Baltimore</span></div>
                        </div>
                    </div>

                    <div class="box-yuan">
                        <div class="yuan">
                            <img src="images/p5.png" alt="">
                        </div>
                        <a href="#" class="zhezhoa3">
                            <!-- 圆行遮罩 -->
                        </a>
                        <div class="jianjie3">
                            <!-- 第三部分简介 -->
                            <div class="nama"><a href="#">reazyrenegade</a></div>
                            <div class="address"><span>Miami,FL</span></div>
                        </div>
                    </div>

                    <div class="box-yuan">
                        <div class="yuan">
                            <img src="images/p6.png" alt="">
                        </div>
                        <a href="#" class="zhezhoa3">
                            <!-- 圆行遮罩 -->
                        </a>
                        <div class="jianjie3">
                            <!-- 第三部分简介 -->
                            <div class="nama"><a href="#">StuBeatZ</a> <img src="images/ad.svg" alt=""></div>
                            <div class="address"><span>Germany</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第四层 -->
            <div class="middle-4">
                <div class="middle-top middle-top2">
                    <h2 class="title"> Popular Genres </h2>
                    <div class="button">
                        <button class="left-arrow">
                            <span>
                                < </span>
                        </button>
                        <button class="right-arrow">
                            <span> > </span>
                        </button>
                    </div>
                </div>
                <div class="middle-botton">
                    <div class="box">
                        <div class="middle-botton-box">
                            <a href="#" class="zhezhao">
                            </a>
                            <a href="#" class="img">
                                <img src="images/hip-hop.jpg" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <a href="#">Hip Hop</a>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <a href="#" class="zhezhao">
                            </a>
                            <a href="#" class="img">
                                <img src="images/pop.jpg" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <a href="#">Pop</a>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <a href="#" class="zhezhao">
                            </a>
                            <a href="#" class="img">
                                <img src="images/rb.jpg" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <a href="#">R&B</a>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <a href="#" class="zhezhao">
                            </a>
                            <a href="#" class="img">
                                <img src="images/rock.jpg" alt="">
                            </a>
                        </div>
                        <div class="jianjie">
                            <a href="#">Rock</a>
                        </div>
                    </div>

                    <div class="box">
                        <div class="middle-botton-box">
                            <a href="#" class="zhezhao">
                            </a>
                            <a href="#" class="img">
                                <img src="images/electronic.jpg" alt="">
                            </a>
                        </div>
                        <div class="jianjie" style="margin-top: 5px;">
                            <a href="#">Electronic</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- 主体部分2 -->
    <section class="banner2">
        <div class="beijingtu">
            <img src="images/release-graph.svg" alt="">
        </div>
        <div class=" w info">
            <h2 class="title">Release Your Music To All Major Digital Music Platforms</h2>
            <p>Keep <span class="yellow">100% of the earnings</span> <span> we collect for you!</span></p>
            <img src="images/100-percentage-fill.svg" alt="" class="">
            <div class="learn-more"><a href="#"><span>Learn more</span></a></div>
        </div>
        <div class="flow-logo">
            <div class="make-logo-middle">
                <div><img src="images/apple.svg" alt=""></div>
                <div><img src="images/deezer.svg" alt=""></div>
                <div><img src="images/youtube-music.svg" alt=""></div>
                <div><img src="images/tik-tok.svg" alt=""></div>
                <div><img src="images/tidal.svg" alt=""></div>
            </div>
        </div>
    </section>

    <!-- 页面大图1 -->
    <section class="datu">
        <!-- 大图模块 -->
        <div class="img-zhezhao"></div>
        <div class="left"><img src="images/iphones@3x.png" alt=""></div>
        <div class="right">
            <h2>Take beats on the go!</h2>
            <div class="p">
                <p>Listen to beats, connect with other musicians,
                    and write lyrics all from the BeatStars app!</p>
            </div>
            <div class="download">
                <img src="images/appstore.png" alt="">
                <img src="images/googleplay.png" alt="">
            </div>
        </div>
    </section>

    <!-- 分隔黑色快 -->
    <div class="heise"></div>

    <!-- 页面大图2 -->
    <section class="datu2">
        <img src="images/become-a-seller-bg.jpg" alt="">
        <div class="make-middle">
            <div class="datu2-top">
                <h2>OVER 2 MILLION CREATORS READY TO WORK WITH YOU!</h2>
                <div class="a"><a href="#">Start Selling</a></div>
            </div>
        </div>
    </section>

    <!-- 邮箱模块 -->
    <section class="email">
        <div class="make-email-middle">
            <h3>Yes! Send me personalized tips for shopping and selling on BeatStars.</h3>
            <form action="">
                <div class="form-group">
                    <i><img src="images/xinfeng.png" alt="" width="23px" height="23px"
                            style="vertical-align: middle;"></i>
                    <input type="text" placeholder="Enter your e-mail">
                </div>
                <button> Subscribe </button>
            </form>
        </div>
    </section>

    <!-- 底部 -->
    <footer>
        <div class="w2">
            <div class="left">
                <h1>Take Beats on the GO!</h1>
                <div class="app-download">
                    <img src="images/appstore.png" alt="">
                    <img src="images/googleplay.png" alt="">
                </div>
            </div>
            <div class="middle">
                <div class="middle-1">
                    <h2>BeatStars</h2>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Merch</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">BeatStars.World</a></li>
                    </ul>
                </div>
                <div class="middle-2">
                    <h2>Support</h2>
                    <ul>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Start Selling</a></li>
                        <li><a href="#">Sign up</a></li>
                        <li><a href="#">Log in</a></li>
                        <li><a href="#">Help desk</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Do Not Sell My Personal Information</a></li>
                        <li><a href="#">GDPR</a></li>
                    </ul>
                </div>
                <div class="middle-3">
                    <h2>Press</h2>
                    <ul>
                        <li><a href="#">Billboard</a></li>
                        <li><a href="#">Vulture</a></li>
                        <li><a href="#">Forbes</a></li>
                        <li><a href="#">Complex</a></li>
                        <li><a href="#">Genius</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <h1>Social Media</h1>
                <ul>
                    <a href="#"><img src="images/youtube.png" alt=""><span>YouTube</span></a>
                    <a href="#"><img src="images/instagram.png" alt=""><span>Instagram</span></a>
                    <a href="#"><img src="images/facebook.png" alt=""><span>Facebook</span></a>
                    <a href="#"><img src="images/twitter.png" alt=""><span>Twitter</span></a>
                    <a href="#"><img src="images/soundcloud.png" alt=""><span>SoundCloud</span></a>
                </ul>
            </div>
        </div>
    </footer>

    <!-- 版权信息 -->
    <div class="w banquan">
        <div class="left">
            <span>© 2021 BeatStars, Inc.</span>
            <span> • </span>
            <span>Version: 3.14.0</span>
            <span>/4.0.1639094525</span>
        </div>
        <div class="right">
            <ul>
                <li><a href="#">Terms & Conditions</a></li>
                <li><a href="#">Cookie Policy</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Copyright Complaint</a></li>
            </ul>
        </div>
    </div>

</body>

</html>